/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    SectionList,
    FlatList,
    TouchableOpacity,

} from 'react-native';



export default class Account extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            data: this._sourceData,

        };
    }

    _sourceData =[
        {name: '大护法'},
        {name: '绣春刀II：修罗战场'},
        {name: '神偷奶爸3'},
        {name: '神奇女侠'},
        {name: '摔跤吧，爸爸'},
        {name: '悟空传'},
        {name: '闪光少女'},
        {name: '攻壳机动队'},
        {name: '速度与激情8'},
        {name: '蝙蝠侠大战超人'},
        {name: '攻壳机动队'},
        {name: '速度与激情8'},
        {name: '蝙蝠侠大战超人'}
    ]


    render() {
        return (
            <View style={{ flex: 1, alignItems: 'center' }}>
                { /* other code from before here */ }


                <FlatList
                    data={this.state.data}

                    // 设置item 不同的key
                    keyExtractor = {this._extraUniqueKey}


                    ListHeaderComponent = {this.renderHeader()}
                    renderItem={this._renderItem}
                    ItemSeparatorComponent={ItemDivideComponent}//分割线组件
                />
            </View>
        );
    }

    _extraUniqueKey(item ,index){
        return "index"+index+item;
    }


    // 头部
    renderHeader(){
        return (
            <View>
            <View style={{width:375,height:280 ,backgroundColor:'#f2f2f2'}}>
                <Image source={{uri:'账户中心－头'}} style={{width:375,height:230}}></Image>

                <View style={styles.topViewStyle}>
                    <TouchableOpacity onPress={this.clickUser.bind(this)}>
                    <Image source={{uri:'个人中心-评价管理'}} style={styles.itemImageViewStyle}></Image>
                    </TouchableOpacity>

                    <TouchableOpacity onPress={()=> alert('This is a button!')}>
                        <Text  style={{fontSize:14,color:"white",marginRight:10}}>资金说明</Text>
                    </TouchableOpacity>

                </View>

                <View style={styles.contentViewStyle}>
                    <Text style={{fontSize:15, marginTop:60 }}>现金:  </Text>
                    <Text style={{color:'orange',fontSize:30, marginTop:45}}>¥3600</Text>
                    <View style={styles.btnViewStyle}>
                        <Text style={{color:'white'}}>提现</Text>
                    </View>
                </View>

            </View>

             {this.renderSectionHeader()}
            </View>
        )
    }

    clickUser(){
         this.props.pushUser();
    }


    // sectionView
    renderSectionHeader() {
        return(
            <View style={styles.sectionViewStyle}>
                <View style={{width:5,height:15, backgroundColor:'orange', marginLeft:10}}></View>
                <Text style={{color:'orange'}}>资金明细</Text>
            </View>
        )
    }


    // cell
    _renderItem = ({item, index}) => {
        return(
            <View style={styles.item}>
                <Image source={{uri:'账户中心－任务红包'}} style={{width:50,height:50,marginLeft:20}}></Image>
                <View>
                    <Text style={{marginLeft:10, fontSize:17}}>{item.name}</Text>
                    <Text style={{marginLeft:10}}>02-27</Text>
                </View>
                <Text style={{fontSize:17, position: 'absolute',  right:25 }}>400</Text>
            </View>
        )
    }
}


class ItemDivideComponent extends Component {
    render() {
        return (
            <View style={{height: 1, backgroundColor: '#cccccc',marginLeft:10,marginRight:10}}/>
        );
    }
};


const styles = StyleSheet.create({

    topViewStyle:{

        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',

        // backgroundColor:'red',
        position: 'absolute',
        top:20,
        left:0,
        right:0,
        height:44,

    },


    itemImageViewStyle:{
        marginLeft:10,
        width:32,
        height:32,

    },

    contentViewStyle:{
        height:160,
        backgroundColor:'white',
        borderRadius:5,
        flexDirection:'row',
        // alignItems:'center',
        justifyContent:'center',

        position: 'absolute',
        left:38,
        right:38,
        bottom:17,
    },


    btnViewStyle:{
        height:40,
        borderRadius:5,
        alignItems:'center',
        justifyContent:'center',
        backgroundColor:'orange',
        position: 'absolute',
        left:30,
        right:30,
        bottom:17,

    },

    sectionViewStyle:{
        backgroundColor:'white',

        width:375,
        height:44,
        flexDirection:'row',
        alignItems:'center',

    },


    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: 'bold',
        backgroundColor: 'rgba(247,247,247,1.0)',
    },
    item: {
        flexDirection:'row',
        alignItems:'center',
        width:375,
        height: 80,
    },

})



module.exports = Account;




